<template>
    <view class="contentlist">
        <view class="form">
            <uni-list >
                <uni-list-item direction="row" >
                    <view class="titlelo" slot="header">类型 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{cat_name}}
                    </view>
                </uni-list-item>
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">所属客户 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{info.client_name}}
                    </view>
                        
                </uni-list-item>
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">所属品牌 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{info.brand}}
                    </view>
                        
                </uni-list-item>
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">所属项目 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{info.title}}
                    </view>
                        
                </uni-list-item>
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">下单时间 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{info.add_time}}
                    </view>
                        
                </uni-list-item>
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">状态 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{info.status_name}}
                    </view>
                        
                </uni-list-item>
                <uni-list-item direction ="row" v-if="info.gen_time">
                    <view class="titlelo" slot="header">受理时间 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{info.gen_time}}
                    </view>
                        
                </uni-list-item>
                <uni-list-item direction ="row" v-if="info.wan_time">
                    <view class="titlelo" slot="header">完成时间 <text class="red"></text></view>
                    <view class="bodyc" slot="body">
                        {{info.wan_time}}
                    </view>
                        
                </uni-list-item>
                <!-- gen_time -->
            </uni-list>
            <view class="tipstitle">售后内容 <text class="red"></text></view>
            <view class="tipscontent">
                {{info.content}}
            </view>
            <view class="tipstitle">售后图片 <text class="red"></text></view>
            <view class="tipscontent imgbox">
                <view class="imglist">
                    <view class="imgone" v-for="(val,index) in info.images" :key="index" @click="showimg(index)">
                        <image class="thumb" :src="val" mode="widthFix"></image>
                       
                    </view>    
                   
                </view>
            </view>
        </view>
        <template v-if="is_edit">
            <view class="btn" v-if="info.status == 0" @click="shouli()">
                受理
            </view>
            <view class="btn" v-if="info.status == 1" @click="wangcheng()">
                完成
            </view>
        </template>    
     
        <view class="goodslist" v-if="showOrder">
            <template v-if="orderlist.length>=1">
                <view class="list-row" v-for="(item,index) in orderlist" 
                @click="selorder(index)"
                :key="index">
                    <text>{{item.project_name}}</text>
                    <uni-icons type="right" size="14"></uni-icons>
                </view>
            </template>
            <template v-else>
                <view class="list-row empty">
                    搜索不出内容~
                </view>
            </template>
         
        </view>
       
    </view>
</template>

<script>

export default{
    components: {
        
    },
    data(){
        return{
            info:{
                id:'',
                cat:'',
                oid:'',
                title:'',
                content:'',
                images:[]
            },
            orderlist:[],
            catlist:[{title:'道具售后',value:1},{title:'工程售后',vlaue:2}],
            role_id:null,
            cat_name:'',
            keyword:'',
            showOrder:false,
            uploadUrl:'',
            header:{},
            is_edit:false
        }
    },
    onLoad(option) {
        this.uploadUrl = this.$api.postURL+'user/upload'
        this.header = {Authorization:uni.getStorageSync('nangtong_login_token')}
        if(option && option.id){
            this.getdetails(option.id)
        }
    },
    onShow() {
        var role_id = uni.getStorageSync('nantong_role_id');
        this.role_id = role_id
        if(!this.info.id){
            if(role_id == 1){
                this.cat_name = "道具售后"
                this.info.cat = 1 
            }
        }
        
    },
    methods:{
        showimg(index){
            uni.previewImage({
                urls:this.info.images,
                current:index
            })
        },
        shouli(){
            var _this = this
            uni.showModal({
                content:"是否确认受理？",
                success:function(r){
                    if(r.confirm){
                        uni.showLoading({
                            
                        })
                        _this.$api.post(`sales_after/shouli`,{id:_this.info.id}).then(()=>{
                            _this.$success('受理成功')
                            uni.hideLoading()
                            _this.getdetails(_this.info.id)
                        }).catch(()=>{
                            uni.hideLoading()
                        })
                    }
                }
            })
        },
        wangcheng(){
            var _this = this
            uni.showModal({
                content:"是否确认完成？",
                success:function(r){
                    if(r.confirm){
                        uni.showLoading({
                            
                        })
                        _this.$api.post(`sales_after/wangcheng`,{id:_this.info.id}).then(()=>{
                            _this.$success('完成成功')
                            uni.hideLoading()
                            _this.getdetails(_this.info.id)
                        }).catch(()=>{
                            uni.hideLoading()
                        })
                    }
                }
            })
        },
        getdetails(id){
            this.$api.get(`sales_after/details?id=${id}`).then(({data})=>{
                this.info = data.info
                this.cat_name = data.cat_name
                this.is_edit = data.is_edit
            })
        },
        submit(){
           if(!this.info.cat){
               this.$error('CAT错误')
               return false;
           } 
           if(!this.info.oid){
               this.$error('请选择售后订单')
               return false;
           }
           if(!this.info.content){
               this.$error('请输入售后内容')
               return false;
           }
           
           uni.showLoading({})
           this.$api.post(`sales_after/submit`,this.info).then(()=>{
               uni.hideLoading()
               this.$success('添加成功')
               uni.navigateBack({data:1})
           }).catch(()=>{
               uni.hideLoading()
           })
        },
     
        selcat(e){
            this.cat_name = this.catlist[e.detail.value].title
            this.info.cat = this.catlist[e.detail.value].value
        },
        changekeyword(e){
            var url
            
            if(this.info.cat == 1){
                url = `order/orderlist?keyword=${e}`
            }else{
                url = `project/order/orderlist?keyword=${e}`
            }
            this.$api.get(url).then(({data})=>{
              
                this.orderlist = data.data
                this.showOrder = true
            })
        },
        selorder(index){
            this.showOrder = false
            var item = this.orderlist[index]
            this.info.oid = item.id
            this.info.title = item.project_name
        }
    }
}    
</script>

<style lang="less">
    page{
        // background-color: #fff;
    }
    .contentlist{
        padding: 20rpx;
        .btn{
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            color: #fff;
            background-color: #2979ff;
            border-radius: 10rpx;
            margin-top: 60rpx;
        }
    }
    .titlelo{
        font-size: 26rpx;
        font-weight: bold;
        width: 150rpx;
        display: flex;
        align-items: center;
    }
    .bodyc{
        width: 560rpx;
        display: flex;
        justify-content: end;
        font-size: 26rpx;
        align-items: center;
        .client_name{
            margin-right: 10rpx;
        }
        .inputc{
            text-align: right;
        }
        .tips{
            margin-left: 10rpx;
        }
    }
    .table{
       min-height: 300rpx;
    }
    .goodslist{
        width: 90%;
        min-height: 80rpx;
        position: fixed;
        top: 300rpx;
        left: 20rpx;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6rpx 2rpx;
        background-color: #fff;
        padding: 0 20rpx;
        border-radius: 10rpx;
        .list-row{
            height: 80rpx;
            line-height: 80rpx;
            border-bottom: 1px solid #e9e9eb;
            font-size: 28rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:last-child{
                border: none;
            }
        }
        
    }
    .empty{
        text-align: center;
        display: block !important;
        color: #6a6a6a;
    }
    .tipstitle{
        text-align: center;
        font-weight: bold;
        height: 80rpx;
        line-height: 80rpx;
    }
    .tipscontent{
        width: 710rpx;
        height: 180rpx;
  
        background-color: #fff;
        // padding: 0 20rpx;
        border-radius: 10rpx;
        padding: 10rpx;
    }
    .imgbox{
    }
    .imglist{
        display: flex;
        align-items: center;
        .imgone{
            width: 170rpx;
            height: 170rpx;
            border-radius: 5rpx;
            overflow: hidden;
            text-align: center;
            border: 1px solid #c7c9ce;
            margin-right: 20rpx;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            .close{
                position: absolute;
                top: 0rpx;
                right: 2rpx;
                z-index: 9;
            }
            .thumb{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>